import Card from '@/components/Card';
import {useUserStore} from '@/store/userStore';
import {useFocusEffect, useNavigation} from '@react-navigation/native';
import {
  Avatar,
  Box,
  Button,
  HStack,
  Image,
  Text,
  View,
  useTheme,
} from 'native-base';
import React, {useCallback, useEffect, useState} from 'react';
const Nologin = ({userAvator}: any) => {
  const navigaition = useNavigation();
  const goLogin = useCallback(() => {
    navigaition.navigate('login');
  }, []);
  return (
    <>
      <Box flexDir={'row'} marginBottom={'3'} w={'100%'}>
        <Avatar
          // style={homeStyle.hearderImg}
          source={userAvator}
          alignSelf={'center'}
          justifyContent={'center'}
          size={'lg'}
        />
        <Box marginLeft={2} w={'2/3'}>
          <HStack
            justifyContent={'center'}
            alignItems={'center'}
            textAlign={'center'}>
            <Text flex={8} fontSize={'md'} fontWeight={'bold'}>
              立即登录，查看特权
            </Text>
            <Button
              onPress={goLogin}
              flex={2}
              size={'auto'}
              rounded={'xl'}
              px={'2'}
              py={'1'}>
              <Text fontSize={'xs'} color={'white'}>
                去登录
              </Text>
            </Button>
          </HStack>
          <Text mt={'2'}>爱宠机密，让你知晓爱宠秘密</Text>
        </Box>
      </Box>
      <Box
        width={'100%'}
        flexDirection={'row'}
        justifyContent={'flex-start'}
        paddingLeft={'2'}
        alignItems={'center'}
        position={'absolute'}
        bottom={0}></Box>
    </>
  );
};
const LoginContent = ({userAvator, account, vipImg}: any) => {
  return (
    <>
      <Box flexDir={'row'} marginBottom={'3'}>
        <Avatar
          // style={homeStyle.hearderImg}
          source={userAvator}
          alignSelf={'center'}
          justifyContent={'center'}
          size={'lg'}
        />
        <Box marginLeft={2}>
          <HStack
            justifyContent={'center'}
            alignItems={'center'}
            textAlign={'center'}>
            <Text isTruncated flex={1} fontSize={'xl'} fontWeight={'bold'}>
              {account}
            </Text>
            <Image
              flex={1}
              source={vipImg}
              size={'5'}
              resizeMode="contain"
              alt="vip"
            />
            <Text flex={1}>QRCode</Text>
          </HStack>
          <HStack space={'1'} mt={'2'}>
            <Text>petinfo</Text>
            <Text>privilege</Text>
            <Text>Medicalinsurance</Text>
          </HStack>
        </Box>
      </Box>
      <Box
        width={'100%'}
        flexDirection={'row'}
        justifyContent={'flex-start'}
        paddingLeft={'2'}
        alignItems={'center'}
        position={'absolute'}
        bottom={0}>
        <Text color={'home.headerfont'} fontWeight={'black'}>
          养宠贴士：
        </Text>
        <Text color={'#6d6e6f'} fontSize={'xs'}>
          快来戳我，添加宠物
        </Text>
      </Box>
    </>
  );
};
export default function () {
  const {avator, isLogined, vip, account} = useUserStore();
  const [vipImg, setVipImg] = useState<any>(require('@/assets/img/vip1.png'));
  const [userAvator, setUserAvator] = useState<any>(
    require('@/assets/img/cat.png'),
  );
  const theme = useTheme();
  useEffect(() => {
    if (isLogined) {
      if (avator) setUserAvator({uri: avator});
      if (vip) setVipImg({vip: avator});
    } else {
    }
  }, []);

  return (
    <Card
      background={{
        linearGradient: {
          start: [0, 0],
          colors: ['#fefdfb', theme.colors.cyan[50]],
          locations: [0.6, 0.9],
        },
      }}>
      {isLogined ? (
        <LoginContent
          userAvator={userAvator}
          account={account}
          vipImg={vipImg}
        />
      ) : (
        <Nologin userAvator={userAvator} account={account} vipImg={vipImg} />
      )}
    </Card>
  );
}
